<template>
  <div id="login">
    <div class="main" @keypress="isEnterPressed">
      <div class="container">
        <div class="info">
          <h1>榆&nbsp;&nbsp;杨</h1><span>后台管理系统</span>
        </div>
      </div>
      <div class="form">
        <div class="thumbnail"><img src="../../assets/logo.png" alt="logo"/></div>
        <form class="login-form">
          <input type="text" @input="changeColor" name="employee_id" v-model="login.employeeID" placeholder="请输入工号"/>
          <input type="password" @input="changeColor" name="employee_password" v-model="login.employeePassword" placeholder="请输入密码"/>
          <button type="button" @click="checkPassword" id="loginBTN">登录</button>
          <p class="message">忘记密码? <a href="mailto:manager@yuyang.com">请联系管理员重置密码</a></p>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
$(() => {
  $("input[name='employee_id']").focus()
})
export default {
  name: 'login',
  data () {
    return {
      login: {
        employeeID: null,
        employeePassword: null
      }
    }
  },
  methods: {
    checkPassword () { // 登录检查密码
      this.$store.dispatch('checkPassword', this.login)
        .then((resolve) => {
          if (!resolve) {
            console.log('密码输入错误！')
            $('#loginBTN').css('background-color', '#f46c6c').html('账户或用户名错误')
          }
        })
    },
    changeColor () {
      $('#loginBTN').css('background-color', '#00838f').html('登录')
    },
    isEnterPressed (e) {
      if (e.code === 'Enter') {
        this.checkPassword()
      }
    }
  }
}
</script>

<style scoped lang="less">
@primeColor: #00838f;
#login{
  .main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    position: relative;
    top: -60px;
    background: #eaeaea;
    height: 100vh;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &:before{
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      display: block;
      background: rgba(255, 255, 255, 0.8);
      width: 100%;
      height: 100%;
    }
  }
  /* Form */
  .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 300px;
    margin: 0 auto 100px;
    padding: 30px;
    border-radius: 3px;
    text-align: center;
  }
  .form .thumbnail {
    background: @primeColor;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    padding: 50px 30px;
    border-radius: 100%;
    box-sizing: border-box;
  }
  .form .thumbnail img {
    display: block;
    width: 100%;
    margin-top: -25px;
  }
  .form input {
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .form button {
    outline: 0;
    background: @primeColor;
    width: 100%;
    border: 0;
    padding: 15px;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  .form .message a {
    color: @primeColor;
    text-decoration: none;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
  }
  .container:before, .container:after {
    content: "";
    display: block;
    clear: both;
  }
  .container .info {
    margin: 50px auto;
    text-align: center;
  }
  .container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
  }
  .container .info span {
    color: #4d4d4d;
    font-size: 12px;
  }
  .container .info span a {
    color: #000000;
    text-decoration: none;
  }
  .container .info span .fa {
    color: @primeColor;
  }
  .form .el-input-group{
    >input{
      width: 65%;
    }
    >#send_code_btn{
      width: 35%;
      background-color: #909399;
    }
  }
}
</style>
